import { useEffect, useState } from 'react'

import { redirectTo } from '@/router/navigate'
import { requestWithTry } from '@/utils/request'
import { Session } from '@/utils/storage'

/**
 * Session.set(sessionKey, { searchParams, pagination, pageList })
    navigateTo('propertyEntryDetail', {
      id: row.propertyEntryRecordId,
      topMenuName: `资产入库-详情${row.propertyEntryRecordNo}`,
      showPageUpDown: true,
    })
 */

/**
 * 详情带上上下页按钮的组件
 * @param {Object} param0
 * @param {Object} param0.id 单据ID
 * @param {boolean} param0.showPageUpDown 是否显示上下翻页按钮
 * @param {string} param0.sessionKey 存储session的key
 * @param {string} param0.pageListApi 获取单据列表的API
 * @param {string} param0.idKey 单据ID的key
 * @param {string} param0.noKey 单据号的key
 * @param {string} param0.detailUrl 详情页的URL
 * @param {string} param0.topMenuNamePrefix 顶部菜单的名称前缀
 * @param {React.Component} param0.DetailCom 详情页的组件
 * @returns
 */
const DetailWithPageUpDown = ({
  id,
  showPageUpDown,
  sessionKey,
  pageListApi,
  idKey,
  noKey,
  detailUrl,
  topMenuNamePrefix,
  DetailCom,
}) => {
  const [showPrev, setShowPrev] = useState(false)
  const [showNext, setShowNext] = useState(false)

  const init = async () => {
    const sessionState = Session.get(sessionKey)
    if (!(showPageUpDown && sessionState)) return
    const { pagination, pageList } = sessionState
    const { current, pageSize, total } = pagination
    const currentIndex = pageList.findIndex(item => item[idKey] === id)
    // 当前页大于1或者当前数据不是第一条
    if (current > 1 || currentIndex > 0) {
      setShowPrev(true)
    }
    // 当前数据不是最后一条或者当前页不是最后一页
    if (currentIndex < pageList.length - 1 || current * pageSize < total) {
      setShowNext(true)
    }
  }

  useEffect(() => {
    init()
  }, [])

  const onPrev = async () => {
    const sessionState = Session.get(sessionKey)
    const { searchParams, pagination, pageList } = sessionState
    const currentIndex = pageList.findIndex(item => item[idKey] === id)
    let listItem
    if (currentIndex > 0) {
      listItem = pageList[currentIndex - 1]
    } else {
      const { data } = await requestWithTry(pageListApi, {
        current: pagination.current - 1,
        pageSize: pagination.pageSize,
        ...searchParams,
      })
      const { content: pageList, current, pageSize, total } = data
      Session.set(sessionKey, { searchParams, pagination: { current, pageSize, total }, pageList })
      listItem = pageList[pageList.length - 1]
    }
    redirectTo(detailUrl, {
      id: listItem[idKey],
      topMenuName: `${topMenuNamePrefix}${listItem[noKey]}`,
      showPageUpDown: true,
      cover: true,
    })
  }

  const onNext = async () => {
    const sessionState = Session.get(sessionKey)
    const { searchParams, pagination, pageList } = sessionState
    const currentIndex = pageList.findIndex(item => item[idKey] === id)
    let listItem
    if (currentIndex < pageList.length - 1) {
      listItem = pageList[currentIndex + 1]
    } else {
      const { data } = await requestWithTry(pageListApi, {
        current: pagination.current + 1,
        pageSize: pagination.pageSize,
        ...searchParams,
      })
      const { content: pageList, current, pageSize, total } = data
      Session.set(sessionKey, { searchParams, pagination: { current, pageSize, total }, pageList })
      listItem = pageList[0]
    }
    redirectTo(detailUrl, {
      id: listItem[idKey],
      topMenuName: `${topMenuNamePrefix}${listItem[noKey]}`,
      showPageUpDown: true,
      cover: true,
    })
  }

  return <DetailCom id={id} showPrev={showPrev} onPrev={onPrev} showNext={showNext} onNext={onNext} />
}

export default DetailWithPageUpDown
